// 搜索页
import React,{useState} from 'react';
import style from './search.module.css'
import { Search } from 'react-vant';
import { useNavigate } from 'react-router-dom';
const searchShoop = () =>{
    const navigate = useNavigate()
    const [value, setValue] = useState('');
    const [hot,setHot] = useState(['王者荣耀','英雄联盟','地下城勇士'])

    const handelFan = () =>{
        navigate('/zin/index')
    }
    return<>
    <span className={style.posi} onClick={()=>handelFan()}> 返回 </span>
         <Search
      autoFocus

    //   rightIcon={true}
    //   background="antiquewhite"
      value={value}
      onChange={setValue}
      placeholder="请输入搜索关键词"
      error={true}
    //   label='😼'
      className={style.search}
    />
    <hr />
    <h3 className={style.h3}>热门搜索</h3>
    {
        hot.map((i)=>{
            return <span key={i} className={style.spanMap}>{i}</span>
        })
    }

    <div className={style.past}>
        <h3>搜索历史</h3>
        <h3 className={style.past2}>清除全部</h3>


    </div>
    

        
    </>
}

export default searchShoop